<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width:200px;
            height:100px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<input type="text">
<div class="box" draggable="true">123</div>
</body>
<script>
    const input = document.querySelector('input')
    const box = document.querySelector('.box')
    function debounce(fn, delay=500) {
      let timer = null
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          fn()
          timer = null
        }, delay)
      }
    }
    function throttle(fn, delay = 100) {
      let timer = null
      return function() {
        if (timer) {
          return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        },500)
      }
    }
    input.addEventListener('keyup', debounce(function(){
      console.log(input.value)
    }, 1000))
    box.addEventListener('drag',throttle(function(e) {
      console.log(e.offsetX, e.offsetY)
    }, 500))
</script>
</html>
